<template>
  <div id="app">
    <router-link to="/discover">发现</router-link>
    |
    <router-link to="/friend">朋友</router-link>
    |
    <router-link to="/mine">个人中心</router-link>
    |
    <router-link to="/list">列表</router-link>
    |
    <router-link to="/detail">详情页</router-link>

    <button @click="constrol(item)" v-for="(item,i) in arr" :key="i">{{item}}</button>
   <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg:'得得得,造孽啊'  ,
        arr:['discover','friend','mine','detail']
      }
    },
    methods: {
      constrol(item){
        if (this.$route.path == '/'+item) {
          return
        }
        // this.$router.push('/mine')
        // this.$router.push({path:'/mine'})
        console.log(item);
        this.$router.push({path:`/${item}`})
        // console.log(this.$route);
      }
    }
  }
</script>

<style>
  button{
    margin-right: 10px;
    margin-left: 10px;
    border: 0;
    background: linear-gradient(to right,red,green,yellow);
    cursor: pointer;
    width: 100px;
    height: 40px;
    color: #fff;
  }

</style>